<template>
  <div>
    
      <el-table
        :show-header="false"
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :cell-style="columnStyle"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column width="120" prop="amount0"></el-table-column>
        <el-table-column prop="amount1"></el-table-column>
        <el-table-column width="120" prop="amount2"></el-table-column>
        <el-table-column prop="amount3"></el-table-column>
        <el-table-column width="120" prop="amount4"></el-table-column>
        <el-table-column prop="amount5"></el-table-column>
      </el-table>
  </div>
</template>
<script>
export default {
  name: "mallMember-detail",
  data() {
    return {
      tableData: [
        {
          amount0: "维保编号",
          amount1: "1",
          amount2: "设备名称",
          amount3: "山东兴湘食品A171127-58",
          amount4: "维保点",
          amount5: "控制系统：控制点监测",
        },
        {
          amount0: "上次维保时间",
          amount1: "2019-09-24 16:09:20",
          amount2: "生成时间",
          amount3: "2019-09-24 16:10:20",
          amount4: "维保周期",
          amount5: "1小时",
        },
        {
          amount0: "维保倒计时",
          amount1: "-4516.3小时",
          amount2: "维保时间类型",
          amount3: "自然时间",
          amount4: "操作指导",
          amount5: "每个控制点进行监测",
        },
      ],
    };
  },
  methods: {
    // 自定义列背景色
    columnStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 2 || columnIndex == 4) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "background:#f3f6fc;";
      } else {
        return "background:#ffffff;";
      }
    },
    // // 和并列
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 0) {
    //     if (rowIndex % 4 === 0) {
    //       return {
    //         rowspan: 4,
    //         colspan: 1,
    //       };
    //     } else {
    //       return {
    //         rowspan: 0,
    //         colspan: 0,
    //       };
    //     }
    //   }
    // },
  },
};
</script>
